import React, { createContext, useMemo } from "react";

interface XCtxValue {
  value: number;
  updateValue?: React.Dispatch<React.SetStateAction<number>>;
}

export const XContext = createContext<XCtxValue>({
  value: 0,
});

interface XProviderProps {
  value: number;
  updateValue?: React.Dispatch<React.SetStateAction<number>>;
  children: React.ReactNode;
}

export const XProvider = (props: XProviderProps) => {
  const value = useMemo(() => {
    return {
      value: props.value,
      updateValue: props.updateValue,
    };
  }, [props.value, props.updateValue]);
  return <XContext.Provider value={value}>{props.children}</XContext.Provider>;
};
